<template>
    <div class="cate-nav">
        <!-- 分类模块 -->
        <div class="nav-con">
            <!-- @mouseleave="showFirstList = false " @mouseenter="showFirstLists"  -->
            <div class="all-categories" @click="goGoodsList(0)">
                全部商品分类
            </div>
            <!-- 品牌--- -->
            <ul class="nav-item" v-if="showNavBar">
                <li class="nav-lis" :class="{ act: labelIndex == index }" v-for="(item, index) in labelList"
                    :key="index" @click="changeGoodsLabel(index)">
                    {{ item.val }}
                </li>
            </ul>

        </div>
        <div style="background-color: #028fcc; height: 2px; position: absolute;  min-width:1200px;"></div>
        <!-- 分类汇总  @mouseenter="showFirstList = true"
            @mouseleave="showFirstList = false"-->
        <div class="cate-list" @mouseleave="showDetail('')">
            <!-- 第一级分类 v-show="showAlways || showFirstList"  
                :class="{ 'large-nav': large, 'opacity-nav': opacity }" 
                 @mouseleave="panel = false"-->
            <div class="nav-side" @mouseleave="showDetail(panel)">
                <ul>
                    <!--   -->
                    <li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)"
                        :style="{ backgroundColor: panel === index ? '#028fcc' : '' }">
                        <span class="nav-side-item" @click.self="goGoodsList(item.id)">{{ item.title }}</span>
                        <span v-for="(second, secIndex) in item.children" :key="secIndex">
                            <span v-if="secIndex < 2"> / </span>
                            <span @click="goGoodsList(second.id, second.pid)" class="nav-side-item"
                                v-if="secIndex < 2">{{ second.title }}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <!-- 展开分类 全部 v-show="panel"  -->
            <div class="detail-item-panel" v-show="isTowShow" @mouseenter="showDetail(panel)"
                @mouseleave="showDetail('')">
                <!-- @mouseenter="panel = true" @mouseleave="panel = false" -->
                <div class="new-nav-detail-item">
                    <div class="nav-detail-item">
                        <template v-for="(item, index) in panelData">
                            <span @click="goGoodsList(item.id, item.pid)" v-if="index < 8" :key="index">
                                <p>{{ item.title }}</p>
                                <Icon type="ios-arrow-forward" />
                            </span>
                        </template>
                    </div>
                    <ul>
                        <li v-for="(items, index) in panelData" :key="index" class="detail-item-row">
                            <span class="detail-item-title" @click="goGoodsList(items.id, items.pid)">
                                <span>{{ items.title }}</span>
                                <Icon type="ios-arrow-forward" />
                                <!-- <span class="glyphicon glyphicon-menu-right"></span> -->
                            </span>
                            <div class="div-title">
                                <span v-for="(item, subIndex) in items.children"
                                    @click="goGoodsList(item.id, items.id, items.pid)" :key="subIndex"
                                    class="detail-item" v-show="subIndex < 14">{{ item.title }} </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 轮播图实现 -->
            <div class="detail-item-image" v-show="!isTowShow">
                <div class="detail-item-image-left">
                    <div class="carousel-images" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
                        <img src="../../assets/images/lunbotu01.jpg" alt="" class="carousel-image">
                        <img src="../../assets/images/lunbotu02.jpg" alt="" class="carousel-image">
                        <!-- <img v-for="(image, index) in images" :key="index" :src="image" alt="image"
                        class="carousel-image"/> -->
                    </div>
                    <!-- <div class="carousel-indicators">
                        <button v-for="(image, index) in images" :key="index" class="carousel-indicator"
                            :class="{ active: index === currentIndex }" @click="setIndicator(index)"></button>
                    </div> -->
                </div>
                <div class="detail-item-image-right">
                    <div class="right-image">
                        <img src="../../assets/images/gnzzdj1.png" alt="">
                    </div>
                    <div class="right-title">手机商城</div>
                    <div style="font-size: 12px; color: #888;text-align: center;">扫码进入微信商城</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getCategory, getGoodsLabel
} from "@/api/goods";
import storage from "@/plugins/storage.js";
import { ButtonGroup } from "view-design";
export default {
    name: "GoodsListNav",
    props: {
        showAlways: {
            // 总是显示下拉分类
            default: false,
            type: Boolean,
        },
        showNavBar: {
            // 显示全部商品分类右侧导航条
            default: true,
            type: Boolean,
        },
        hover: {
            default: false,
            type: Boolean,
        },
        large: {
            // 是否更高的高度
            default: false,
            type: Boolean,
        },
        opacity: {
            // 是否背景透明
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            panel: 0, // 二级分类展示
            panelData: [], // 二级分类数据
            showFirstList: true, // 始终展示一级列表
            cateList: [], // 商品分类,
            labelIndex: -1,
            labelList: [],
            isTowShow: false,
            // 轮播图数据
            currentIndex: 0,
            images: [
            // static/img/lunbotu01.d8a02a2f.jpg
                "static/img//lunbotu01.jpg",
                "static/img//lunbotu02.jpg",
            ],
            intervalId: null,
            // 品牌弹出层
            brandClick: false
        };
    },
    created() {
    },

    computed: {
        navList() {
            // 导航列表
            if (storage.getItem("navList")) {
                return JSON.parse(storage.getItem("navList"));
            } else {
                return [];
            }
        },
    },
    methods: {
        showFirstLists() {
            this.showFirstList = true;
            if (
                localStorage.getItem("category") &&
                localStorage.getItem("category_expiration_time")
            ) {
                // this.getCate();
                // 如果缓存过期，则获取最新的信息
                if (new Date() > localStorage.getItem("category_expiration_time")) {
                    this.getCate();
                    return;
                }
                this.cateList = JSON.parse(localStorage.getItem("category"));
                // this.$Message.info(cateList)
            }
        },
        getCate() {
            // 获取分类数据
            if (this.hover) return false;
            getCategory(0).then((res) => {
                if (res.code == 1) {
                    this.cateList = res.data;
                    this.$store.commit("SET_CATEGORY", res.data);
                    // 过期时间
                    var expirationTime = new Date().setHours(new Date().getHours() + 1);
                    // 存放过期时间
                    localStorage.setItem("category_expiration_time", expirationTime);
                    // 存放分类信息
                    localStorage.setItem("category", JSON.stringify(res.data));
                    console.log(res.data, '----123');
                }
            });
        },
        showDetail(index) {
            // 展示全部分类
            // console.log(index);
            this.panel = index;
            if (index === '') {
                this.isTowShow = false
            } else {
                this.panelData = this.cateList[this.panel].children;
                this.isTowShow = true
            }
        },
        goGoodsList(id, secondId, firstId) {
            // 分类共有三级，传全部分类过去
            if (id === 0) {
                this.labelIndex = -1;
                this.$store.commit("SET_CATEGORYID", '');
                this.$parent.getParams({ goodslabel: '', categoryId: '' })
            } else {
                const arr = [firstId, secondId, id];
                if (!arr[1]) {
                    arr.splice(0, 2);
                }
                if (!arr[0]) {
                    arr.shift();
                }
                /* let routerUrl = this.$router.resolve({
                    path: "/goodsList",
                    query: {
                        categoryId: arr.toString()
                    },
                });
                window.open(routerUrl.href, "_blank"); */

                this.labelIndex = -1;
                this.$store.commit("SET_CATEGORYID", arr.toString());
                this.$parent.getParams({ goodslabel: '', categoryId: arr[arr.length - 1] })
            }
        },

        getLabel() {
            // 获取商品标签数据
            if (this.hover) return false;
            getGoodsLabel({}).then((res) => {
                if (res.code == 1) {
                    this.labelList = res.data;
                    this.$store.commit("SET_GOODSLABEL", res.data);
                    // 过期时间
                    var expirationTime = new Date().setHours(new Date().getHours() + 1);
                    // 存放过期时间
                    localStorage.setItem("category_expiration_time", expirationTime);
                    // 存放分类信息
                    localStorage.setItem("goodslabel", JSON.stringify(res.data));
                }
            });
        },

        changeGoodsLabel(index) {
            if (this.labelIndex == index) {
                this.labelIndex = -1;
                this.$parent.getParams({ goodslabel: '' })
            } else {
                this.labelIndex = index;
                this.$parent.getParams({ goodslabel: this.labelList[index]['key'] })
            }
        },
        //轮播图
        startAutoplay() {
            this.intervalId = setInterval(() => {
                this.nextSlide();
            }, 3000); // 每3秒切换一次图片  
        },
        stopAutoplay() {
            clearInterval(this.intervalId);
        },
        nextSlide() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
        },
        setIndicator(index) {
            this.currentIndex = index;
        },
    },
    mounted() {
        this.startAutoplay();
        if (
            localStorage.getItem("category") &&
            localStorage.getItem("category_expiration_time")
        ) {
            // 如果缓存过期，则获取最新的信息
            if (new Date() > localStorage.getItem("category_expiration_time")) {
                this.getCate();
                return;
            }
            this.cateList = JSON.parse(localStorage.getItem("category"));
        } else {
            this.getCate();
        }

        if (
            false &&
            localStorage.getItem("goodslabel") &&
            localStorage.getItem("category_expiration_time")
        ) {
        } else {
            this.getLabel();
        }
    },
    beforeDestroy() {
        this.stopAutoplay();
    },
};
</script>

<style scoped lang="scss">
.nav-lis:hover {
    color: $theme_color !important;
    cursor: pointer;
}

.nav-lis {
    margin-left: 60px;
}

.nav-lis.act {
    color: $theme_color !important;
}

.cate-nav {
    width: 1200px;
    // position: relative;
    margin: 0 auto;


}

/** 商品分类 */
.nav-con {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    display: flex;

    .all-categories {
        width: 203px;
        line-height: 40px;
        color: #fff;
        background-color: $theme_color;
        text-align: center;
        font-size: 16px;
        border-bottom: none;
        border-radius: 5px 0 0 0;
    }

    .nav-item {
        width: 1000px;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        list-style: none;
        // background-color: #eee;
        display: flex;

        li {
            // float: left;
            font-weight: bold;
            margin-left: 30px;
            color: rgb(129, 127, 127);
            font-size: 15px;

            &:hover {
                color: #2b85e4;
            }
        }
    }
}

// 分类列表
.cate-list {
    margin: 15px auto;
    height: 345px;
}

.nav-side {
    // position: relative;
    float: left;
    padding: 0px;
    color: #fff;
    background-color: #6e6568;
    height: 334px;
    width: 230px;
    overflow: hidden;

    ul {
        width: 260px !important;
        overflow-y: auto;
    }
}

.large-nav {
    height: 470px;

    ul>li {
        line-height: 20px;
    }
}

.opacity-nav {
    background-color: rgba(0, 0, 0, 0.5);
}

.nav-side ul {
    width: 100%;
    padding: 0px;
    padding-top: 5px;
    list-style: none;
    height: 100%;
}

.nav-side li {
    padding: 7.5px 0;
    padding-left: 12px;
    font-size: 13px;
    line-height: 18px;
}

.nav-side-item:hover {
    cursor: pointer;
    color: #000;
}

/*-------------------------------显示商品详细信息*/
.detail-item-panel {
    height: 335px;
    width: 960px;
    background-color: #fff;
    overflow-y: auto;

    .new-nav-detail-item {
        min-width: 100%;
        height: 330px;

        .nav-detail-item {
            // margin-top: 10px;
            margin-bottom: 15px;
            cursor: pointer;
            color: #eee;
            position: relative;
            top: 10px;
            display: flex;

            span {
                // display: block;
                padding: 0 5px;
                margin: 0 10px;
                font-size: 14px;
                background-color: #6e6568;
                display: flex;
                text-align: center;
                align-items: center;
                min-width: 60px;

                p {
                    display: inline-block;
                    // min-width: 40px;
                    padding: 0 2px;
                }
            }
        }

        ul {
            min-width: 100%;

            li {
                min-width: 100%;
                display: flex;

                .detail-item-title {
                    font-weight: bold;
                    font-size: 13px;
                    cursor: pointer;
                    color: #555555;
                    padding-right: 10px;
                    width: 90px;
                    // text-align: left;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: 10px;
                    margin-bottom: 5px;

                    &:hover {
                        color: #2b85e4;
                    }
                }

                .div-title {
                    flex: 1;

                    .detail-item {
                        min-width: 70px;
                        height: 20px;
                        border: none;
                        line-height: 20px;
                        margin-left: 2px;
                        border-right: 1px solid #999;
                        padding: 0 2px;
                        cursor: pointer;

                        &:last-child {
                            border-right: 0px solid #999;

                        }

                        &:hover {
                            color: #2b85e4;
                        }
                    }
                }
            }
        }
    }
}


.nav-detail-item span:hover {
    background-color: #2b85e4;
}

.detail-item-title:hover {
    color: #2b85e4;
}

// 轮播图
.detail-item-image {
    display: flex;

    .detail-item-image-left {
        flex: 1;
        margin: 0 5px;
        height: 334px;
        // background-color: #000;
        overflow: hidden;

        .carousel {
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-image {
            flex: 0 0 auto;
            width: 100%;
            height: auto;
        }

        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
        }

        .carousel-indicator {
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            outline: none;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0.5;
        }

        .carousel-indicator.active {
            background-color: white;
            opacity: 1;
        }
    }

    .detail-item-image-right {
        width: 240px;
        height: 334px;

        .right-title {
            font-size: 24px;
            text-align: center;
            height: 44px;
            font-weight: bold;
        }

        .right-image {
            width: 240px;
            height: 240px;
            overflow: hidden;

            img {
                width: 240px;
                height: 240px;
            }
        }
    }
}

/* 滚动条整体样式 */
::-webkit-scrollbar {
    width: 10px;
    /* 宽度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 滑块颜色 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 轨道颜色 */
    border-radius: 10px;
    /* 圆角 */
}
</style>
